<template>
	<view style="background-color: #fff; height: 100vh; margin-top: 50rpx;">
		<view class="charts-box">
			<qiun-data-charts type="line" :chartData="chartData" :ontouch="true" />
		</view>
		<view class="charts-box" style="margin-top: 60rpx;">
			<qiun-data-charts type="line02" :chartData="dayData" :ontouch="true" />
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				chartData: {},
				dayData: {},
			}
		},
		onLoad() {
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.getMonthData()
			this.getDayData()
		},
		methods: {
			getMonthData(type) {
				this.$api.getMonthData().then(res => {
					if (res.ok&&res.data){
						let times = res.data.times
						let timevalues = res.data.timevalues ? res.data.timevalues : []
						let MonthData = {
							categories: times,
							series: [{
								name: "月K线",
								data: timevalues
							}]
						};
						this.chartData = MonthData
					}
				})
			},
			getDayData(type) {
				this.$api.getDayData().then(res => {
					if (res.ok&&res.data) {
						let times = res.data.times
						let timevalues = res.data.timevalues ? res.data.timevalues : []
						let dayData = {
							categories: times,
							series: [{
								name: "日K线",
								data: timevalues
							}]
						};
						this.dayData = dayData
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 30rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
		}

		.charts-box {
			width: 100%;
			height: 300px;
		}
	}
</style>
